<template>
  <!-- 新建仓库 -->
  <div class="main">
    <div class="warehouseDetails-contain">
      <!-- 上--表单部分 -->
      <div class="warehouseDetails-form">
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="10px" class="demo-ruleForm">
          <!-- 第一行 编号 名称 类型-->
          <div>
            <el-row>
              <el-col :span="8"><div class="grid-content bg-purple" />
                <el-form-item prop="code">
                  <span>仓库编号</span>
                  <el-input v-model="ruleForm.code" placeholder="请输入" size="medium" label="" maxlength="10" type="text" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="8"><div class="grid-content bg-purple-light" />
                <el-form-item prop="name">
                  <span>仓库名称</span>
                  <el-input v-model="ruleForm.name" placeholder="请输入" size="medium" label="" type="text" />
                </el-form-item>
              </el-col>
              <el-col :span="8"><div class="grid-content bg-purple" />
                <el-form-item prop="type">
                  <span>仓库类型</span>
                  <el-select v-model="ruleForm.type" placeholder="请选择" size="medium">
                    <el-option
                      v-for="item in typeOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <!-- 第二行 省市级级联选择器-->
          <div>
            <el-row>
              <el-col :span="16"><div class="grid-content bg-purple" />
                <el-form-item prop="location">
                  <span>省/市/区</span>
                  <el-cascader
                    v-model="selectedOptions"
                    size="large"
                    :options="options"
                    label-width="180px"
                    @change="handleChange"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8"><div class="grid-content bg-purple" /></el-col>
            </el-row>
          </div>
          <!-- 第三行 详细地址 单选框-->
          <div>
            <el-row>
              <el-col :span="16"><div class="grid-content bg-purple" />
                <el-form-item prop="address">
                  <span>详细地址</span>
                  <el-input v-model="ruleForm.address" placeholder="请输入" size="medium" label="" maxlength="10" type="text" />
                </el-form-item>
              </el-col>
              <el-col :span="8"><div class="grid-content bg-purple" />
                <el-form-item prop="status">
                  <span>仓库状态</span>
                  <el-radio-group v-model="ruleForm.status">
                    <el-radio label="1">启用 </el-radio>
                    <el-radio label="0">停用</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <!-- 第四行 面积 负责人 联系电话-->
          <div>
            <el-row>
              <el-col :span="8"><div class="grid-content bg-purple" />
                <el-form-item prop="surface">
                  <span>仓库面积</span>
                  <!-- 该输入框只能输入数字 -->
                  <el-input
                    v-model="ruleForm.surface"
                    placeholder="请输入"
                    oninput="value=value.replace(/[^\d.]/g,'')"
                    size="medium"
                    label=""
                    maxlength="10"
                    type="text"
                    @blur="inputChange"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8"><div class="grid-content bg-purple-light" />
                <el-form-item prop="personName">
                  <span>负责人</span>
                  <el-input v-model="ruleForm.personName" placeholder="请输入" size="medium" label="" type="text" />
                </el-form-item>
              </el-col>
              <el-col :span="8"><div class="grid-content bg-purple-light" />
                <el-form-item prop="phone">
                  <span>联系电话</span>
                  <el-input v-model="ruleForm.phone" placeholder="请输入" size="medium" label="" type="text" />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-form>
      </div>
      <!-- 下--按钮部分 -->
      <div class="warehouseDetails-button">
        <el-row>
          <el-button round @click="back">返回</el-button>
          <el-button type="warning" round @click="submitForm">提交</el-button>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import { addWarehouse, getCode, editWarehouse } from '@/api'
import { regionData, CodeToText } from 'element-china-area-data'
export default {
  name: 'WarehouseDetails',
  data() {
    return {
      // 校验表单的数据
      ruleForm: {
        code: '', // 仓库编号
        name: '', // 仓库名称
        status: '', // 仓库状态
        type: '', // 仓库类型
        address: '', // 详细地址
        surface: '', // 面积
        location: '', // 省市区
        province: '', // 省
        city: '', // 市
        area: '' // 区
      },
      //   表单校验规则
      rules: {
        // 仓库名称
        name: [
          { required: true, message: '请输入仓库名称', trigger: ['blur', 'change'] }
        ],
        // 仓库类型
        type: [
          { required: true, message: '请选择仓库类型', trigger: 'blur' }
        ],
        // 省市区
        location: [
          { required: true, message: '请选择区域', trigger: ['blur', 'change'] }
        ],
        // // 仓库类型
        // address: [
        //   { required: true, message: '请选择仓库类型', trigger: ['blur', 'change'] }
        // ]
        // 负责人
        personName: [
          { required: true, message: '请输入负责人', trigger: ['blur', 'change'] }
        ],
        phone: [
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的电话号码', trigger: 'blur' }
        ]
      },
      // 仓库类型选择器选项
      typeOptions: [{
        value: 'ZZ',
        label: '中转仓'
      }, {
        value: 'JG',
        label: '加工仓'
      }, {
        value: 'CB',
        label: '储备仓'
      },
      {
        value: 'LC',
        label: '冷藏仓'
      }],
      // 省市区级联选择器选项
      options: regionData,
      selectedOptions: [],
      CodeToText,
      // 表单回显
      currentData: {},
      loc: ''
    }
  },
  //   获得编号 编辑回显数据
  async created() {
  // 获得仓库编码
    const res = await getCode('CK')
    this.ruleForm.code = res.data.data
    // 如果跳转过来没有带id，就是编辑，调编辑的接口
    if (this.$route.params.id !== 'null') {
      const res = await editWarehouse(this.$route.params.id)
      // 获得节点数据
      this.currentData = res.data.data
      //   console.log(this.currentData)
      this.loc = [this.currentData.province, this.currentData.city, this.currentData.area]
      this.ruleForm = {
        code: this.currentData.code,
        name: this.currentData.name,
        status: this.currentData.status,
        type: this.currentData.type,
        address: this.currentData.address,
        surface: this.currentData.surface,
        location: this.currentData.location,
        province: this.currentData.province,
        city: this.currentData.city,
        area: this.currentData.area
      }
    }
  },
  methods: {
    // 兜底校验
    submitForm() {
      this.$refs.ruleForm.validate(async(valid) => {
        if (!valid) return
        console.log(this.ruleForm)
        const res = await addWarehouse(this.ruleForm)
        console.log(res)
        this.$message.success('提交成功!')
        this.$router.go(-1)
      })
    },
    // 省市区级联选择器函数
    handleChange() {
    // =  console.log(value)
    //   value.forEach(item => console.log(CodeToText[item]))
    //   console.log(CodeToText)
      var loc = ''
      for (let i = 0; i < this.selectedOptions.length; i++) {
        if (i < 2) {
          loc += CodeToText[this.selectedOptions[i]] + '/'
        } else {
          loc += CodeToText[this.selectedOptions[i]]
        }
      }
      //   console.log(loc, '111')
      this.ruleForm.location = loc
      this.ruleForm.province = this.selectedOptions[0]
      this.ruleForm.city = this.selectedOptions[1]
      this.ruleForm.area = this.selectedOptions[2]
    },
    // 仓库面积 input框只能输入数字
    inputChange(e) {
      this.ruleForm.surface = e.target.value
    },
    // 回退到上一个页面
    back() {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
.main{
    min-height: calc(100vh - 84px);
    min-height: calc(100vh - 50px);
    background-color: #fdfafa;
    width: 100%;
    position: relative;
    overflow: hidden;
}
// 新建仓库卡片样式
.warehouseDetails-contain{
    height: 509px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
    margin-top: 20px;
    margin-left: 29px;
    margin-right: 29px;
    padding-top: 31px;
    padding-bottom: 30px;
}
// 上--表单样式
.warehouseDetails-form{
    padding-left: 30px;
    padding-right: 30px;
}
// 上--按钮样式
.warehouseDetails-button{
    padding: 25px 0 0;
    margin: 0 -30px -5px;
    border-top: 1px solid #f5efee;
    text-align: center;
}
</style>

